<template>
  <div>
    <h2 class="title">链接生成器</h2>
    <div class="content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="请求地址">
          <el-input v-model="form.url" placeholder="请输入请求地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="参数"
          ><el-table :data="tableData" style="width: 100%">
            <el-table-column label="参数名">
              <template slot-scope="scope">
                <el-input v-model="scope.row.parameter_name" placeholder="请输入请求地址" clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="是否内置参数" width="120">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.is_parameter_value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="内置参数值">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.parameter_value"
                  placeholder="请选择内置参数值"
                  :disabled="!scope.row.is_parameter_value"
                >
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="固定参数值">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.no_parameter_value"
                  :disabled="scope.row.is_parameter_value"
                  placeholder="请输入固定参数值"
                  clearable
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="操作">
              <template slot-scope="scope, index">
                <i
                  class="el-icon-circle-close"
                  style="font-size: 22px; cursor: pointer"
                  @click="tableData.splice(index + 2, 1)"
                ></i>
              </template>
            </el-table-column>
          </el-table>
          <div class="addbtn">
            <el-button type="primary" icon="el-icon-plus" style="width: 60%" @click="addbtn">添加</el-button>
          </div>
        </el-form-item>
      </el-form>

      <div>
        <el-button type="primary" icon="el-icon-check" style="width: 20%" @click="create">生成</el-button>

        <h4 id="copyVal" style="display: inline-block; margin-left: 20px">{{ ok_url }}</h4>

        <i
          v-if="ok_url"
          style="font-size: 22px; margin-left: 20px; cursor: pointer"
          class="el-icon-document-copy p3"
          @click="copy"
          data-clipboard-action="copy"
          data-clipboard-target="#copyVal"
        ></i>
      </div>

      <div></div>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
export default {
  data() {
    return {
      ok_url: "",
      form: { url: "" },

      tableData: [{ parameter_name: "", is_parameter_value: false, parameter_value: "", no_parameter_value: "" }],
      options: [
        {
          value: "__CALLBACK__",
          label: "callback",
        },
        {
          value: "__IDFA__",
          label: "idfa",
        },
        {
          value: "__IP__",
          label: "用户IP地址",
        },
        {
          value: "__TS__",
          label: "时间戳",
        },
        {
          value: "__UA__",
          label: "ua",
        },
        {
          value: "__CID__",
          label: "cid",
        },
        {
          value: "__MAINID__",
          label: "mainid",
        },
      ],
    };
  },
  methods: {
    create() {
      let url = `${JSON.parse(JSON.stringify(this.form.url))}?`;
      this.tableData.forEach((element, index) => {
        console.log(element);
        if (this.tableData.length == index + 1) {
          if (element.is_parameter_value) {
            url = `${url}${element.parameter_name}=${element.parameter_value}`;
          } else {
            url = `${url}${element.parameter_name}=${element.no_parameter_value}`;
          }
        } else {
          if (element.is_parameter_value) {
            url = `${url}${element.parameter_name}=${element.parameter_value}&`;
          } else {
            url = `${url}${element.parameter_name}=${element.no_parameter_value}&`;
          }
        }
      });
      this.ok_url = url;
      this.$message({
        message: "链接生成成功！",
        type: "success",
      });
    },
    copy() {
      this.$nextTick(() => {
        var clipboard = new Clipboard(".p3");
        console.log("插件", clipboard);
        clipboard.on("success", e => {
          this.$message({
            type: "success",
            message: "复制成功",
          });
          console.info("复制成功做的事情:", e.action);
          console.info("复制成功的文本:", e.text);
          console.info("复制成功触发:", e.trigger);
          e.clearSelection();

          // 释放内存
          clipboard.destroy();
        });
        clipboard.on("error", e => {
          console.error("复制错误做的事情:", e.action);
          console.error("复制错误触发:", e.trigger);
          // 不支持复制
          this.$message({
            type: "info",
            message: "不支持自动复制",
          });
          // 释放内存
          clipboard.destroy();
        });
      });
    },

    addbtn() {
      this.tableData.push({
        parameter_name: "",
        is_parameter_value: false,
        parameter_value: "",
        no_parameter_value: "",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
}
.content {
  width: 1000px;
  margin: 30px auto;
}
.addbtn {
  margin-top: 30px;
  text-align: center;
}
</style>
